<template>
  <div class="log-box">
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <div class="list-head">
        <span :style="route.query.id === '2' ? 'width: 40%' : 'width: 40%'"
              class="head-time">{{ route.query.id === '3' ? '互转时间' : '时间' }}</span>
        <span :style="route.query.id === '2' ? 'width: 20%' : 'width: 30%'"
              class="head-type">{{ route.query.id === '3' ? '地址' : '类型' }}</span>
        <span :style="route.query.id === '2' ? 'width: 20%' : 'width: 30%'"
              class="head-rewards">{{ route.query.id !== '1' ? '数量' : '奖励' }}</span>
        <span v-if="route.query.id === '2'" style="width: 20%" class="head-status">状态</span>
      </div>
      <div class="list-body">
        <div class="body-content" v-for="(item, index) in list" :key="index">
          <span :style="route.query.id === '2' ? 'width: 40%' : 'width: 40%'">{{ item.create_time }}</span>
          <span v-if="route.query.id !== '2'" :style="route.query.id === '2' ? 'width: 20%' : 'width: 30%'">{{
              route.query.id === '3' ? textSubstr(item.to_wallet_address, 4) : getAddOrDec(item.change_type)
            }}</span>
          <span v-else :style="route.query.id === '2' ? 'width: 20%' : 'width: 30%'">{{
              getWithdrawType(item.type)
            }}</span>
          <span v-if="route.query.id !== '2'" :style="route.query.id === '2' ? 'width: 20%' : 'width: 30%'">{{
              route.query.id === '3' ? item.money : item.change_amount
            }}USDT</span>
          <span v-else style="width: 20%">{{ item.all_money }}</span>
          <span v-if="route.query.id === '2'"
                style="width: 20%">{{ getStatusShow(item.status) }}</span>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script setup>
import {ref, onMounted} from 'vue';
import {useRoute} from 'vue-router';
import req from '@/libs/req';
import {textSubstr, sliceDecimal, formatNum} from '@/libs/utlis.js';

let pageNum = 1;
const route = useRoute();
const type = route.query.type || 1
const list = ref([]);
const loading = ref(false);
const finished = ref(false);

// 印射提现状态展示
const getStatusShow = (type) => {
  let txt;
  switch (type) {
    case 1:
      txt = '提取中';
      break;
    case 2:
      txt = '提取成功';
      break;
    case 3:
      txt = '提取失败';
      break;
  }
  return txt;
}
// 印射提现的是USDT还是GBT
const getWithdrawType = (type) => {
  if (type === 1) return '提现USDT';
  return '提现AVM';
}
// 印射是增加还是减少
const getAddOrDec = (type) => {
  if (type === 1) return '增加';
  return '减少';
}
const onLoad = async () => {
  let res;
  if (route.query.id === '3') {
    res = await req.post('Index/rotationLog', {
      type: 1,
      page_size: 5,
      page_no: pageNum
    })
  } else if (route.query.id === '1') {
    res = await req.post('Index/accountLog', {
      type_log: route.query.id,
      page_size: 5,
      page_no: pageNum
    })
  } else if (route.query.id === '2') {
    res = await req.post('Index/withdrawalLog', {
      type: type,
      page_size: 10,
      page_no: pageNum
    })
  }

  if (route.query.id === '2') {
    list.value.push(...res.data.list);
    pageNum++
    loading.value = false;
    if (list.value.length >= res.data.count) {
      finished.value = true;
    }
  } else {
    list.value.push(...res.list);
    pageNum++
    loading.value = false;
    if (list.value.length >= res.count) {
      finished.value = true;
    }
  }
};
onMounted(() => {
  switch (route.query.id) {
    case '1':
      document.title = '奖励记录';
      break;
    case '2':
      document.title = '提现记录';
      break;
    case '3':
      document.title = '互转记录';
      break;
  }
})
</script>
<style scoped lang="scss">
.log-box {
  min-height: 100vh;

  .list-head {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 16px;
    color: #F7AC15;
    text-align: center;
    padding: 16px 0 24px;
  }

  .list-body {
    width: 100%;

    .body-content {
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 14px;
      color: #F6F6F6;
      text-align: center;
      margin-bottom: 20px;
    }
  }
}
</style>
